import 'package:flutter/material.dart';
import 'package:flutter_deer/account/iview/take_out_iview.dart';
import 'package:flutter_deer/account/models/take_out_entity.dart';
import 'package:flutter_deer/account/presenter/take_out_presenter.dart';
import 'package:flutter_deer/mvp/base_page.dart';
import 'package:flutter_deer/res/resources.dart';
import 'package:flutter_deer/util/other_utils.dart';
import 'package:flutter_deer/util/theme_utils.dart';
import 'package:flutter_deer/widgets/my_app_bar.dart';
import 'package:flutter_deer/account/provider/take_out_provider.dart';
import 'package:flutter_gen/gen_l10n/deer_localizations.dart';
import 'package:flutter_deer/widgets/state_layout.dart';
import 'package:provider/provider.dart';
import '../../order/page/order_page.dart';

class WithdrawalRecordListPage extends StatefulWidget {

  const WithdrawalRecordListPage({super.key});

  @override
  _WithdrawalRecordListPageState createState() => _WithdrawalRecordListPageState();
}

class _WithdrawalRecordListPageState extends State<WithdrawalRecordListPage> with BasePageMixin<WithdrawalRecordListPage, TakeOutPagePresenter>, AutomaticKeepAliveClientMixin<WithdrawalRecordListPage> implements TakeOutIMvpView{

  TakeOutProvider provider = TakeOutProvider();
  @override
  bool get wantKeepAlive => false;
  @override
  TakeOutPagePresenter createPresenter() => TakeOutPagePresenter();
  @override
  void setTakeOutList(List<TakeOutEntity>? takeOutList){
    provider.setTakeOutList(takeOutList);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(title: '${DeerLocalizations.of(context)!.withdrawRecord.nullSafe}'),
      body: ChangeNotifierProvider<TakeOutProvider>(
        create: (_) => provider,
        child: Consumer<TakeOutProvider>(
          builder: (_,provider,child){
            if(provider.takeOutList!.isEmpty==true){
              return Container(
                  alignment: Alignment.bottomCenter,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        StateLayout(type: StateType.takeOut)
                      ]
                  )
              );
            }
            return CustomScrollView(
              slivers: [
                for (int i = 0; i < provider.takeOutList!.length; i++)
                  _buildGroup(provider.takeOutList!.elementAt(i),i)
              ],
            );
          }
        )
      )
    );
  }

  Widget _buildGroup(TakeOutEntity? takeOutEntity,int index) {
    return SliverMainAxisGroup(
      slivers: [
        SliverPersistentHeader(
          pinned: true,
          delegate: SliverAppBarDelegate(
            Container(
              alignment: Alignment.centerLeft,
              width: double.infinity,
              color: ThemeUtils.getStickyHeaderColor(context),
              padding: const EdgeInsets.only(left: 16.0),
              child: Text('${takeOutEntity!.date}'),
            )
            , 34.0,
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate((_, index) {
            return _buildItem(takeOutEntity.list!.elementAt(index));
          },
            childCount: takeOutEntity.list!.length,
          ),
        ),
      ],
    );
  }

  Widget _buildItem(TakeOutItemEntity? item) {
    String statusContent = '${DeerLocalizations.of(context)!.withdrawSuccess.nullSafe}';
    Color statusColor = Colours.green;
    if(item!.status=='0'){
      statusContent = '${DeerLocalizations.of(context)!.pendingApproval.nullSafe}';
      statusColor = Colours.orange;
    }else if(item!.status=='2'){
      statusContent = '${DeerLocalizations.of(context)!.withdrawFail.nullSafe}';
      statusColor = Theme.of(context).colorScheme.error;
    }
    final Widget content = Stack(
      children: <Widget>[
        Text('${item!.bankName}（${item!.cardNo} ${item!.cardUsername}）'),
        Positioned(
          top: 0.0,
          right: 0.0,
          child: Text('-${item.score}', style: TextStyles.textBold14),
        ),
        Positioned(
          bottom: 0.0,
          left: 0.0,
          child: Text('${item.time}', style: Theme.of(context).textTheme.titleSmall),
        ),
        Positioned(
          bottom: 0.0,
          right: 0.0,
          child: Text(
            statusContent,
            style: TextStyle(
              fontSize: Dimens.font_sp12,
              color: statusColor,
            ),
          ),
        ),
      ],
    );

    return MergeSemantics(
      child: Container(
        height: 72.0,
        width: double.infinity,
        padding: const EdgeInsets.all(15.0),
        decoration: BoxDecoration(
          border: Border(
            bottom: Divider.createBorderSide(context, width: 0.8),
          ),
        ),
        child: content,
      ),
    );
  }
}
